<html>
<head>

</head>
<body>
<script src="jquery.js"></script>
<script src="jquery.tableHelper.js"></script>
<script>
css1 = { backgroundColor : '#ffdddd'}
css2 = { backgroundColor : '#ddddff'}
css3 = { border : 'red 1px solid', width : '20px', height : '20px', textAlign : 'center' }

$("<table></table>")
	.appendTo(document.body)
	.resize(10,10)
	.col(0).html('0').tableEnd()
	.col(1).html('1').tableEnd()
	.col(2).html('2').tableEnd()
	.col(3).html('3').tableEnd()
	.col(4).html('4').tableEnd()
	.col(5).html('5').tableEnd()
	.col(6).html('6').tableEnd()
	.col(7).html('7').tableEnd()
	.col(8).html('8').tableEnd()
	.col(9).html('9').tableEnd()
	.col(10).html('.').tableEnd()
	.row(0).html('.').tableEnd()
	.row(10).html('.').tableEnd()
	.cell(1,1).css(css1).tableEnd()
	.cell(5,5).css(css2).html('*').tableEnd()
	.odd().css(css2).tableEnd()
	.even().css(css1).tableEnd()
	.all().css(css3).tableEnd()


$tbl = $('<table border=1"></table>').resize(10,10).appendTo(document.body).all().html('[-]').tableEnd();

$tbl.range('b3:f4').merge().css({border : 'black 4px solid'}).tableEnd();
$tbl.range('g5:g10').merge().css({border : 'black 4px solid', textAlign : 'center'}).html('*').tableEnd();
$tbl.range('a6:b7').merge().css({border : 'black 4px solid', textAlign : 'center'}).tableEnd();



var interval = null;

$('<button>Unmerge</button>')
	.appendTo(document.body)
	.click(function () {
		$tbl.cell(0,5).css('backgroundColor','red').unMerge().html('.').tableEnd();
	});

$('<button>Step</button>')
	.appendTo(document.body)
	.click(function () {
		applyColors();
	});

$('<button>Animate</button>')
	.appendTo(document.body)
	.click(function () {
		interval = setInterval(function () {
			applyColors();
		}, 200);
	});

$('<button>Stop Animation</button>')
	.appendTo(document.body)
	.click(function () {
		clearInterval(interval);
	});


colors = ['#aaaaff','#8888dd','#6666bb','#444499','#222277'];

colors = ['red','orange','yellow','green','blue'];
var index = 0;

applyColors();

function applyColors(step) {
	$tbl.range('a1:j10').css({backgroundColor : colors[nextIndex()]}).tableEnd();
	$tbl.range('b2:i9').css({backgroundColor : colors[nextIndex()]}).tableEnd();
	$tbl.range('c3:h8').css({backgroundColor : colors[nextIndex()]}).tableEnd();
	$tbl.range('d4:g7').css({backgroundColor : colors[nextIndex()]}).tableEnd();
	$tbl.range('e5:f6').css({backgroundColor : colors[nextIndex()]}).html('[*]').tableEnd();
}

function nextIndex() {
	if (index == colors.length) {
		index = 0;
	}
	else index++;

	return index;
}


$tbl2 = $('<table />').attr('border',1).resize(6,4).appendTo(document.body).css({border : 'black 4px solid'}).all().html('[-]').tableEnd()
	.range('a1:a1').html('Is Active').tableEnd()
	.range('b1:b1').html('').append('<input type="checkbox" />').tableEnd()
	.range('a2:a2').html('Is New').tableEnd()
	.range('b2:b2').html('').append('<input type="checkbox" />').tableEnd()
	.range('a3:a3').html('Is Something').tableEnd()
	.range('b3:b3').html('').append('<input type="checkbox" />').tableEnd()
	.range('a4:a4').html('notes').tableEnd()
	.range('b4:f4').merge().html('').append($('<textarea />')).tableEnd()
	.range('c1:f3').merge().html('here is a merged help cell').css({border : 'blue 4px solid'}).tableEnd()


</script>
</body>
</html>
